<template>
    <div>
        <div class="musicList">
            <div class="new">最新歌单</div>


            <ul @click="goListDetail" class="playList" v-for="(item,index) in songList" :key=index>
                <!--                跳转到歌单详情-->
                <li><img :src="item.picUrl" alt="">
                    <p>{{item.name}}</p>
                </li>
            </ul>
        </div>
        <!--          歌曲列表-->
        <div class="songBox">
            <div class="new">最新音乐</div>
            <!--            跳转到歌词详情-->
            <div @click="goSongDetail(item.id)" class="songList" v-for="(item,index) in NewSongList" :key=index>
                <span>{{item.name}}</span>
                <p><span>111</span>&nbsp;&nbsp;{{item.song.artists[0].name}}-{{item.song.album.name}}</p>
                <!--                定位-->
                <div class="positionIon"></div>
            </div>
            <div></div>
        </div>


    </div>
</template>
<script>

    import {getRecommendedSongList} from "@/api/api" // 推荐歌单
    import {getNewSongList} from "@/api/api"
    export default {
        name: "Newpage.vue",
        data() {
            return {
                active: 0,
                icon: {
                    active: 'https://img.yzcdn.cn/vant/user-active.png',
                    inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
                },
                //定义
                //推荐歌单
                songList: [],
                //获取新歌榜
                NewSongList: []
            };
        },



        created() {
            getRecommendedSongList(6).then((res) => {
                console.log(res)
                this.songList = res.result
            })
            //获取最新歌曲
            getNewSongList().then((res) => {
                console.log(res)
                this.NewSongList = res.result
            })
        },
        methods: {
            goSongDetail(id) {
                this.$router.push({
                    path: '/SongDetail',
                    query: {songId:id}
                })
            },
            goListDetail(id){
                this.$router.push({
                    path: '/ListDetail',
                    query: {id}
                })
            },
        }
    }
</script>
<style lang="less" scoped>

    .musicList {
    }

    ;
    /*最新歌单样式*/
    .new {
        border-left: 3px solid red;
        padding-left: 5px;
        margin-top: 15px;
    }

    /*   请求的歌单列表 */
    .playList li {
        float: left;
        height: 155px;
        width: 33%;
        /*background: antiquewhite;*/
        padding-right: 1px;
    }

    .playList img {
        height: 70%;
        width: 100%;
    }

    .playList {
        margin-top: 10px;
    }

    .musicList {
        /*background-color: cadetblue;*/
        height: 330px;
        width: 100%;
    }

    .playList p {
        font-family: "Arial Black";
        font-size: 8px;
        width: 95px;
        margin-left: 5px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        /*color: salmon;*/
    }

    /*    歌曲列表样式*/
    /*父盒子*/
    .songBox {
        height: 132px;
        width: 100%;
        /*background-color: antiquewhite;*/
    }

    /*子盒子*/
    .songList {
        position: relative;
        margin-top: 10px;
        height: 45px;
        width: 100%;
        border-bottom: 1px solid gainsboro;
        /*background-color: salmon;*/
    }

    /*    播放图标 精灵图*/
    .positionIon {
        position: absolute;
        height: 25px;
        width: 25px;
        /*background: black;*/
        right: 10px;
        bottom: 10px;
        background-position: -25px 0;
        background-image: url('../../../assets/img/index_icon_2x.png');
        background-size: 180px 110px;
    }

    /*    歌手p*/
    .songList p {
        font-size: 12px;
        color: black;
    }

    .songList > p > span {
        background-position: 2px 0;
        background-image: url('../../../assets/img/index_icon_2x.png');
        background-size: 215px 120px;
        width: 20px;
        color: white;
    }
</style>